/* eslint no-undef: 0 */
/* eslint arrow-parens: 0 */
import React from 'react';
import { Affix, Button } from 'antd';
import { enquireScreen } from 'enquire-js';
import { VerticalAlignTopOutlined } from '@ant-design/icons';
import Banner01 from './Banner01';
import Feature0 from './Feature0';
import Flash from './Flash';
import FlashCenter from './FlashCenter';
import Chrome from './Chrome';
import FireFox from './FireFox';
import Browser360 from './Browser360';
import CardSystem from './CardSystem';
import ReadCard from './ReadCard';
import Script from './Script';
import Footer0 from './Footer0';

import {
  Banner31DataSource,
  Feature00DataSource,
  FlashDataSource,
  FlashCenterDataSource,
  ChromeDataSource,
  FireFoxDataSource,
  Browser360DataSource,
  CardSystemDataSource,
  ReadCardDataSource,
  ScriptDataSource,
  Footer00DataSource,
} from './data.source';
import './less/antMotionStyle.less';

let isMobile;
enquireScreen((b) => {
  isMobile = b;
});

const { location = {} } = typeof window !== 'undefined' ? window : {};

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isMobile,
      show: !location.port, // 如果不是 dva 2.0 请删除
    };
  }

  componentDidMount() {
    // 适配手机屏幕;
    enquireScreen((b) => {
      this.setState({ isMobile: !!b });
    });
    // dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响；
    /* 如果不是 dva 2.0 请删除 start */
    if (location.port) {
      // 样式 build 时间在 200-300ms 之间;
      setTimeout(() => {
        this.setState({
          show: true,
        });
      }, 500);
    }
    /* 如果不是 dva 2.0 请删除 end */
  }

  render() {
    const children = [
      <Banner01
        id="Banner01"
        key="Banner01"
        dataSource={Banner31DataSource}
        isMobile={this.state.isMobile}
      />,
      <Feature0
        id="Feature0_0"
        key="Feature0_0"
        dataSource={Feature00DataSource}
        isMobile={this.state.isMobile}
      />,
      <Flash
        id="flash"
        key="flash"
        dataSource={FlashDataSource}
        isMobile={this.state.isMobile}
      />,
      <FlashCenter
        id="flash_center"
        key="flash_center"
        dataSource={FlashCenterDataSource}
        isMobile={this.state.isMobile}
      />,
      <Chrome
        id="chrome"
        key="chrome"
        dataSource={ChromeDataSource}
        isMobile={this.state.isMobile}
      />,
      <Browser360
        id="Browser360"
        key="Browser360"
        dataSource={Browser360DataSource}
        isMobile={this.state.isMobile}
      />,
      <FireFox 
        id="firefox"
        key="firefox"
        dataSource={FireFoxDataSource}
        isMobile={this.state.isMobile}
      />,
      <CardSystem
        id="card_system"
        key="card_system"
        dataSource={CardSystemDataSource}
        isMobile={this.state.isMobile}
      />,
      <ReadCard
        id="read_card"
        key="read_card"
        dataSource={ReadCardDataSource}
        isMobile={this.state.isMobile}
      />,
      <Script
        id="Script"
        key="Script"
        dataSource={ScriptDataSource}
        isMobile={this.state.isMobile}
      />,
      <Footer0
        id="Footer0_0"
        key="Footer0_0"
        dataSource={Footer00DataSource}
        isMobile={this.state.isMobile}
      />,
    ];
    return (
      <div
        className="templates-wrapper"
        ref={(d) => {
          this.dom = d;
        }}
      >
        <Affix
          offsetBottom={50}
          className='index_Affix'
          onClick={() => {
            document.querySelector("#Feature0_0").scrollIntoView();
          }}
        >
          <VerticalAlignTopOutlined className='nav_icon' />
        </Affix>
        {/* 如果不是 dva 2.0 替换成 {children} start */}
        {this.state.show && children}
        {/* 如果不是 dva 2.0 替换成 {children} end */}
      </div>
    );
  }
}
